<template>
  <view class="XSuccessIcon">
    <uni-popup
      ref="successIconPopup"
      type="center"
      :is-mask-click="false"
      mask-background-color="rgba(0,0,0,0.5)"
    >
      <view class="content">
        <image class="icon" src="./icon.png" mode="scaleToFill" />
        <text class="msg">{{ state.msg }}</text>
        <view class="foot">
          <text
            v-if="state.showConfirm || state.confirmText"
            class="btn confirm"
            @click="
              () => {
                emit('confirm',state.value);
                successIconPopup.close();
              }
            "
            >{{ state.confirmText || "查看详情" }}</text
          >
          <text
            v-if="state.showCancel || state.cancelText"
            class="btn cancel"
            @click="
              () => {
                emit('cancel');
                successIconPopup.close();
              }
            "
            >{{ state.cancelText || "返回" }}</text
          >
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs, ref } from "vue";
import { navigate } from "@/util/navigate";
import XSuccessIcon from "@/components/successIcon/index.vue";
onMounted(() => {});
const state = reactive({
  showConfirm: false,
  showCancel: false,
  confirmText: "",
  cancelText: "",
  autoClose: false,
  msg: "",
  value: null
});

const successIconPopup = ref();
const emit = defineEmits(["confirm", "cancel"]);
function show({
  showConfirm = false,
  showCancel = false,
  autoClose = false,
  confirmText = "",
  cancelText = "",
  msg = "",
  value=null
}) {
  successIconPopup.value.open();
  state.showConfirm = showConfirm;
  state.showCancel = showCancel;
  state.confirmText = confirmText;
  state.cancelText = cancelText;
  state.msg = msg;
  state.value = value
  
  if (autoClose) setTimeout(() => successIconPopup.value.close(), 1500);
}

defineExpose({ show });
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
